<template>
  <div>
    <div class="head-container">
      <el-row>
        <el-col :span="24">
          <div class="head-item-container">
            当前报表：{{ reporttitle }}</div>
        </el-col>
      </el-row>
      <el-divider />
    </div>
    <div class="chart-container"><chart
      ref="childChart"
      height="100%"
      width="100%"
      :option="option"
    /></div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/DyRadar'
import { getRadarData } from '@/api/chart'

export default {
  name: 'DyRadarChart',
  components: { Chart },
  data() {
    return {
      legend: [],
      indicator: [],
      series: [],
      reporttitle: '活跃用户报表',
      datetype: null,
      datetypes: [
        { code: '1', title: '年报' },
        { code: '2', title: '季报' },
        { code: '3', title: '月报' },
        { code: '4', title: '周报' },
        { code: '5', title: '日报' }
      ],
      producttype: null,
      producttypes: [
        { code: '1', title: '手机' },
        { code: '2', title: '电脑' },
        { code: '3', title: '汽车' },
        { code: '4', title: '媒体' }
      ],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value6: '',
      value7: ''
    }
  },
  computed: {
    option: {
      // getter
      get: function() {
        return { title: {
          text: '动态雷达图'
        },
        tooltip: {},
        legend: {
          data: this.legend
        },
        radar: {
        // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: this.indicator
        },
        series: this.series
        }
      },
      // setter
      set: function(newValue) {
        // this.$refs.childChart.option = this.option
      }
    }},
  mounted() {
    this.getData()
    // this.$refs.childChart.initChart()
  },
  methods: {
    getData() {
      getRadarData().then(response => {
        this.legend = response.data.legend
        this.indicator = response.data.indicator
        this.series = response.data.series
        console.log('chart series:' + this.series)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
.head-container {
  position: relative;

  .head-item-container {
    padding: 20px 5px 20px 0px;
    position: relative;
    @include clearfix;
    margin-bottom: 0px;
  }
}
</style>
